<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
        <script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script>
        <script src="/timedate.js"></script>
        <script src="/ciallo.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> 
		<title>ciallo</title>
        <style>
            
        </style>
	</head>

    <body>
        <script>
                var f_idx = 0;
                var c_idx = 0;
                jQuery(document).ready(function($) {
                    $("body").click(function(e) {
                        var font = new Array("Ciallo～(∠・ω<)⌒★");
                        var color = new Array('#ff0000','#eb4310','#f6941d','#fbb417','#ffff00','#cdd541','#99cc33','#3f9337','#219167','#239676','#24998d','#1f9baa','#0080ff','#3366cc','#333399','#003366','#800080','#a1488e','#c71585','#bd2158');
                        var $i = $("<span />").text(font[f_idx]);
                        f_idx = (f_idx + 1) % font.length;
                        c_idx = (c_idx + 1) % color.length;
                        var x = e.pageX,
                            y = e.pageY;
                        $i.css({
                            "z-index": 99999999999999999999999999999999999999999999999999999999999999999999999999 ,
                            "top": y - 20,
                            "left": x,
                            "position": "absolute",
                            "font-weight": "bold",
                            "color": color[c_idx]
                        });
                        $("body").append($i);
                        $i.animate({
                                "top": y - 180,
                                "opacity": 0
                            },
                            1500,
                            function() {
                                $i.remove();
                            });
                    });
                });
            </script>

        <div id="datetime" class="datetime" style="left: 90vw; top:0vw; position: absolute; font-size: 2vw;"></div>         <!--时间显示-->
        
        <p class="main">
            <button onclick="ciallo()" style="height: 95vh; width: 100%; background-color: transparent; border: none; background-image: url('/ciallo.jpg');"></button>
        </p>
        
        <p id="ciallo_cnt" class = "ciallo_cnt" >
            
        </p>

        <p id="0721_cnt" class = "0721_cnt" >
            
        </p>

        <button onclick="onani()">
            <img src="/0d00.gif" style="position: absolute;top:10vw;left: 20vw;"> 
            <img src="/0d00.gif" style="position: absolute;top:10vw;left: 50vw;">
        </button>
  
        
    </body>
</html>